<!--信息修改-->
<template>
  <sub-page class="createActivity">
    <main-card>
      <my-steps :active="active" class="my-steps">
        <el-step title="修改活动"></el-step>
        <el-step title="正式使用"></el-step>
        <el-step title="查看数据"></el-step>
      </my-steps>
      <!-- 表单 -->
      <div class="creat-step1">
        <div class="inner">
          <el-form label-position="left" :model="createForm" :rules="rules" ref="createForm">
            <el-form-item label="商家名称" prop="barName">
              <el-input v-model="createForm.barName" placeholder="请输入商家名称"></el-input>
            </el-form-item>
            <el-form-item label="商家地址" prop="address" style="margin-bottom: 18px">
              <el-input v-model="createForm.address" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="Wi-Fi密码:" prop="wifi" style="margin-bottom: 18px">
              <el-input v-model="createForm.wifi" placeholder="选填" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="酒吧通知:" prop="broadCt" style="margin-bottom: 18px">
              <el-input v-model="createForm.broadCt" placeholder="示例:今晚八点,在场所有女生均能获得免费果盘一份。" size="mini"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="submit-button" @click="requestEditInfo">立即修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom-tipbar">
        <my-tip-bar class="my-tip-bar" colorStyle="yellow"
          >为了您的互动体验更流畅，请使用chrome浏览器进行互动
          <a :href="downloadURL" class="blue-text" target="_blank">立即下载</a>
        </my-tip-bar>
        <my-tip-bar class="my-tip-bar" colorStyle="blue"
          >点击查看使用帮助，简易连接大屏电脑的网络单独提供（如4g热点），不要与现场混在一起，以免现场用户太多导致网络拥堵，从而影响现场效果</my-tip-bar
        >
      </div>
    </main-card>
  </sub-page>
</template>

<script>
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
import MySteps from '@/components/mySteps';
import MyTipBar from '@/components/myTipBar';
import { getActivity } from '@/api/setting/activitySetting/theme';
import { editActivityMsg } from '@/api/setting/activitySetting/activity';

const macUrl = 'https://ustatic.joymew.com/browsers/googlechromeSetupMacos.dmg';
const osUrl = 'https://ustatic.joymew.com/browsers/ChromeStandaloneSetup64.exe';
export default {
  name: 'activityEdit',
  components: {
    MySteps,
    MainCard,
    SubPage,
    MyTipBar,
  },
  created() {
    // 根据liveId获取所有活动信息
    this.getActivityInfo();
    this.generateDownloadURL();
  },
  mounted() {},
  data() {
    return {
      active: 0,
      timeout: null,
      downloadURL: osUrl,
      createForm: {
        barName: '',
        logoPath: '',
        address: '',
        wifi: '',
        broadCt: '',
      },
      rules: {
        barName: [{ required: true, message: '请输入商家名称', trigger: 'blur' }],
        address: [{ required: true, message: '请输入商家地址', trigger: 'blur' }],
      },
    };
  },
  computed: {},
  methods: {
    /* 修改信息请求 */
    requestEditInfo() {
      const data = {
        splid: this.$store.state.liveId,
        theme: this.createForm.barName,
        hotel_name: this.createForm.address,
        sceneio: this.createForm.type,
        wife_mima: this.createForm.wifi,
        bar_notice: this.createForm.broadCt,
      };

      editActivityMsg(data).then((res) => {
        console.log('提交修改', res);
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功',
          });
        }
      });
    },
    // 不同系统浏览器下载
    generateDownloadURL() {
      const version = navigator.userAgent.toLowerCase();
      const mac = version.indexOf('mac');
      const os = version.indexOf('os');
      if (mac > 0 && os > 0) {
        // 苹果系统下执行的操作
        this.downloadURL = macUrl; // 这里的请求方式为get，如果需要认证，接口上需要带上token
      } else {
        this.downloadURL = osUrl; // 这里的请求方式为get，如果需要认证，接口上需要带上token
      }
      console.log(this.downloadURL);
    },
    /* 获取活动信息 */
    getActivityInfo() {
      getActivity({ splid: this.$store.state.liveId }).then((res) => {
        console.log('xxxxxxxxxxxx');
        console.log(res);
        const info = res.data;
        this.createForm.barName = info.theme;
        this.createForm.address = info.hotel_name;
        this.createForm.wifi = info.wife_mima;
        this.createForm.broadCt = info.bar_notice;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.my-steps {
  margin: 45px 100px 10px;
}
.bottom-tipbar {
  border-top: 1px solid #e9e9e9;
  padding: 10px 0 80px 35px;
  .my-tip-bar {
    margin-top: 10px;
  }
}
.creat-step1 {
  padding-top: 15px;
  display: flex;
  width: 100%;
  .inner {
    margin: auto;
    width: 70%;
    max-width: 480px;
    .el-form::v-deep {
      .el-form-item__label {
        width: 85px;
        font-size: 13px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.85);
      }
      .el-autocomplete {
        width: 100%;
      }
      .el-input {
        width: 80%;
        input {
          height: 29px;
        }
      }
      //取消显示左侧必填星号
      // .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
      // .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
      //   content: '';
      //   color: #f56c6c;
      //   margin-right: 0;
      //   display: none;
      // }
      .submit-button {
        width: 67px;
        height: 29px;
        background: #1890ff;
        border-color: #1890ff;
        .hvCenter();
        padding: 0;
        span {
          width: 51px;
          height: 20px;
          font-size: 13px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
        }
      }
    }
  }
}
</style>
